<script lang="ts" setup>
import { Decimal } from 'decimal.js';
import type { AttributeForm, BeiZhuForm, TableItem } from "@/common/type/beizhu" // 导入ts 数据类型
import { exportExcel } from "@/common/utils/exportExcel" // 引入导出excel函数
import { replaceTemplateKeys } from "@/common/utils/replaceTemplate" // 引入备注变量替换函数

// 装备计算基数
const zbNum = ref(1) // 装备数量

// 属性抽屉状态
const drawerAttribute = ref(false) // 属性抽屉

// 初始属性表单
const attributeForm = ref<AttributeForm>({
  zhiye: "3",
  id: 3,
  type: "1",
  value: 100,
  increase: 7,
  uuid: 0
})

// 初始属性值
const attributeInit = ref<AttributeForm[]>([])

// 添加初始属性
function addAttribute() {
  const newAttribute = {
    zhiye: String(attributeForm.value.zhiye),
    id: Number(attributeForm.value.id),
    type: String(attributeForm.value.type),
    value: Number(attributeForm.value.value),
    increase: Number(attributeForm.value.increase),
    uuid: Date.now()
  }
  // 添加到数组
  attributeInit.value.push(newAttribute)
  console.log(attributeInit.value)
}

// 生成初始属性


function formatDataToSpecifiedString(data: AttributeForm[], i: number): string {
  let result = ''
  for (let i = 0; i < data.length; i++) {
    const item = data[i];
    let calculatedValue;
    if (item.type === "1") {
      calculatedValue = Math.round(Number(item.value)+(Number(item.value)*(Number(item.increase)/100))); // 注意这里的 `i` 是否是你要的变量
    } else {
      calculatedValue = new Decimal(item.value).plus(item.increase).toNumber(); // 同上
    }
    data[i].value = calculatedValue
    result += `${item.zhiye}#${item.id}#${calculatedValue}|`;
  }

  return result.substring(0, result.length - 1);
  // return data
  //   .map(item => `${item.zhiye}#${item.id}#${item.type === "1" ? Math.round(item.value * (item.increase ** i)) : (item.value + item.increase * i)}`)
  //   .join("|")
}

// 删除属性
function attributeDel(uuid: number) {
  attributeInit.value = attributeInit.value.filter(item => item.uuid !== uuid)
}

// 编辑备注抽屉状态
const drawer = ref(false)

// 备注属性表单
const beiZhuForm = ref<BeiZhuForm>({
  id: 1,
  type: "1",
  key: "key",
  value: 100,
  increase: 7
})

// 初始备注属性值
const beiZhuInit = ref<BeiZhuForm[]>([])

// 添加备注属性
function addBeiZhu() {
  const newBeizhu = {
    id: Number(beiZhuForm.value.id),
    type: String(beiZhuForm.value.type),
    key: String(beiZhuForm.value.key) + Number(beiZhuForm.value.id),
    value: Number(beiZhuForm.value.value),
    increase: Number(beiZhuForm.value.increase)
  }
  beiZhuForm.value.id = Number(beiZhuForm.value.id) + 1
  // 添加到数组
  beiZhuInit.value.push(newBeizhu)
  console.log(beiZhuInit.value)
}

// 删除属性
function baiZhuDel(id: number) {
  beiZhuInit.value = beiZhuInit.value.filter(item => item.id !== id)
}

// 装备基础设置
const idx = ref(50000) // 装备id
const name = ref("") // 装备名字
const StdMode = ref("10") // 装备类型
const Weight = ref("1") // 装备重量
const Anicount = ref("0") // 负重值(外观)
const Source = ref("0") // 暂留
const Reserved = ref("0") // 暂留
const Looks = ref("0") // 背包显示
const DuraMax = ref("0") // 持久度
const Need = ref("0") // 使用条件
const NeedLevel = ref(1) // 使用等级
const Price = ref(1) // 出售价格
const Color = ref("251") // 颜色
const OverLap = ref("") // 叠加物品
const Suit = ref("") // 老套装ID
const Article = ref("") // 物品规则
const Job = ref("100") // 使用职业
const effectParam = ref("") // 道具特殊效果参数
const Desc = ref("") // 备注
const pickset = ref("") // 内挂拾取
const guangzhu = ref("") // 物品光柱
const auctionby = ref("") // 拍卖行分类
const sEffect = ref("") // 物品内观特效
const bEffect = ref("") // 物品背包特效
const value = ref("") // 预留字段
const rizhi = ref("") // 物品后台查询
const zblmtkz = ref("") // 是否屏蔽裸模 (只针对衣服和时装) 0=不屏蔽  1=屏蔽
const ITEMPAEAM1 = ref("") // 自定义字符分类1
const ITEMPAEAM2 = ref("") // 自定义字符分类2
const Comparison = ref("") // 装备比较优先级 (职业#优先级)(职业=填空或0战士， 1法师， 2道士， 3三职业) (同类型装备比较 数字越小越低0-9999999 -1为不提示对比)不提示对比设置方法：AF列Comparison字段   -1=人物和英雄都不提示穿戴提示   -2=人物不提示    -3=英雄不提示
const suitid = ref("") // 新套装(配套表cfg_suitex.xls里面的ID 多个套装ID#分割)
const Insurance = ref("") // 装备投保 （货币#投保金额） 填1#1#1表示开启投保tips不显示投保金额 填 2#1000|2#800|2#500|2#100，投保一次价格是1000元宝，两次是800元宝
const pickCondition = ref("") // 自动拾取条件(页签条件格式如$(LEVEL)>=1参照说明书cfg_menulayer.xls配置条件 填 |1，表示此装备开启自动走上去一个个拾取。 填写范例1：|1填写范例2：$(MONEY,2)>=50000|1
const DropTypeShow = ref("") // 掉落频道提示信息配置 默认为1，填1表示分类1 填2表示分类2
const QiugouGoldList = ref("") // 设置求购行货币最小限制:货币ID1#货币数值|货币ID2#货币数值
const QiugouMaxCnt = ref("") // 求购行最大求购数量限制(填-1，表示不允许求购)

const ShuXing1 = ref("") // 属性1
const ShuXing2 = ref("") // 属性2

// 导出数据函数
function handleExport() {
  exportExcel({
    data: tableData.value,
    fileName: "装备备注.xlsx",
    title: "cfg_equip",
    headers: [
      { name: "idx", key: "idx" },
      { name: "name", key: "name" },
      { name: "StdMode", key: "StdMode" },
      { name: "Weight", key: "Weight" },
      { name: "Anicount", key: "Anicount" },
      { name: "Source", key: "Source" },
      { name: "Reserved", key: "Reserved" },
      { name: "Looks", key: "Looks" },
      { name: "DuraMax", key: "DuraMax" },
      { name: "Attribute", key: "Attribute" },
      { name: "Need", key: "Need" },
      { name: "NeedLevel", key: "NeedLevel" },
      { name: "Price", key: "Price" },
      { name: "Color", key: "Color" },
      { name: "OverLap", key: "OverLap" },
      { name: "Suit", key: "Suit" },
      { name: "Article", key: "Article" },
      { name: "Job", key: "Job" },
      { name: "effectParam", key: "effectParam" },
      { name: "Desc", key: "Desc" },
      { name: "pickset", key: "pickset" },
      { name: "guangzhu", key: "guangzhu" },
      { name: "auctionby", key: "auctionby" },
      { name: "sEffect", key: "sEffect" },
      { name: "bEffect", key: "bEffect" },
      { name: "value", key: "value" },
      { name: "rizhi", key: "rizhi" },
      { name: "zblmtkz", key: "zblmtkz" },
      { name: "ITEMPAEAM1", key: "ITEMPAEAM1" },
      { name: "ITEMPAEAM2", key: "ITEMPAEAM2" },
      { name: "Comparison", key: "Comparison" },
      { name: "suitid", key: "suitid" },
      { name: "Insurance", key: "Insurance" },
      { name: "pickCondition", key: "pickCondition" },
      { name: "DropTypeShow", key: "DropTypeShow" },
      { name: "QiugouGoldList", key: "QiugouGoldList" },
      { name: "QiugouMaxCnt", key: "QiugouMaxCnt" },
      { name: "ShuXing1", key: "ShuXing1" },
      { name: "ShuXing2", key: "ShuXing2" }
    ],
    columnWidths: [10, 20, 10, 25]
  })
}

// 生成装备参数
const tableData = ref<TableItem[]>([])

// 生成装备函数
function generate() {
  const newData: TableItem[] = []
  // 批量生成优化方案
  for (let i = 1; i <= zbNum.value; i++) {
    newData.push({
      idx: idx.value + i, // 动态计算唯一ID
      name: name.value, // 带序号的名字
      StdMode: StdMode.value, // 装备类型
      Weight: Weight.value, // 装备重量
      Anicount: Anicount.value, // 负重值(外观)
      Source: Source.value, // 暂留
      Reserved: Reserved.value, // 暂留
      Looks: Looks.value, // 背包显示
      DuraMax: DuraMax.value, // 持久度
      Attribute: formatDataToSpecifiedString(attributeInit.value, i), // 属性
      Need: Need.value, // 使用条件
      NeedLevel: NeedLevel.value * i, // 使用条件
      Price: Price.value, // 使用条件
      Color: Color.value, // 颜色
      OverLap: OverLap.value, // 使用条件
      Suit: Suit.value, // 老套装ID
      Article: Article.value, // 老套装ID
      Job: Job.value, // 使用职业
      effectParam: effectParam.value, // 道具特殊效果参数
      Desc: replaceTemplateKeys(Desc.value, beiZhuInit.value, false), // 备注
      pickset: pickset.value, // 内挂拾取
      guangzhu: guangzhu.value, // 物品光柱
      auctionby: auctionby.value, // 拍卖行分类
      sEffect: sEffect.value, // 拍卖行分类
      bEffect: bEffect.value, // 拍卖行分类
      value: value.value, // 拍卖行分类
      rizhi: rizhi.value, // 物品后台查询
      zblmtkz: zblmtkz.value, // 是否屏蔽裸模
      ITEMPAEAM1: ITEMPAEAM1.value, // 是否屏蔽裸模
      ITEMPAEAM2: ITEMPAEAM2.value, // 是否屏蔽裸模
      Comparison: Comparison.value, // 是否屏蔽裸模
      suitid: suitid.value, // 是否屏蔽裸模
      Insurance: Insurance.value, // 是否屏蔽裸模
      pickCondition: pickCondition.value, // 是否屏蔽裸模
      DropTypeShow: DropTypeShow.value, // 是否屏蔽裸模
      QiugouGoldList: QiugouGoldList.value, // 是否屏蔽裸模
      QiugouMaxCnt: QiugouMaxCnt.value, // 是否屏蔽裸模

      ShuXing1: replaceTemplateKeys(ShuXing1.value, beiZhuInit.value, false), // 属性1
      ShuXing2: replaceTemplateKeys(ShuXing2.value, beiZhuInit.value, true) // 属性2

    })
  }
  tableData.value.push(...newData)
}

// 清空装备数据函数
function clearData() {
  tableData.value = []
}

// 装备类型
const StdModeArr = [
  {
    value: "10",
    label: "衣服(男)"
  },
  {
    value: "11",
    label: "衣服(女)"
  },
  {
    value: "12",
    label: "左手盾牌"
  },
  {
    value: "15",
    label: "头盔"
  },
  {
    value: "16",
    label: "斗笠(双头盔)"
  },
  {
    value: "19",
    label: "项链(19)"
  },
  {
    value: "20",
    label: "项链(20)"
  },
  {
    value: "21",
    label: "项链(21)"
  }
]

// 物品规则
// 物品规则格式: 1 | 2 | 3 | 4
const ArticleArr = [
  { value: "1", label: "禁止丢弃" },
  { value: "2", label: "禁止交易" },
  { value: "3", label: "禁止存仓库" },
  { value: "4", label: "禁止修理" },
  { value: "5", label: "禁止出售" },
  { value: "6", label: "上线消失" },
  { value: "7", label: "死亡必爆 (和规则14二选一)" },
  { value: "8", label: "禁止英雄使用" },
  { value: "9", label: "禁止摆摊和上架拍卖行" },
  { value: "10", label: "禁止存入个人商店" },
  { value: "11", label: "禁止挑战" },
  { value: "12", label: "禁止宝石升级" },
  { value: "13", label: "掉落提示" },
  { value: "14", label: "禁止人物爆出 (和规则7二选一)" },
  { value: "15", label: "禁止店铺打折" },
  { value: "16", label: "禁止捡取" },
  { value: "17", label: "下线必掉" },
  { value: "18", label: "丢弃消失" },
  { value: "19", label: "禁止人物使用" },
  { value: "20", label: "禁止携带在人物左手镯位置" },
  { value: "21", label: "爆出直接消失" }
]

// 使用职业
const JobArr = [
  { value: "0", label: "战士" },
  { value: "1", label: "法师" },
  { value: "2", label: "道士" },
  { value: "100", label: "三职业都可以" }
]

// 内挂捡取
// 设置格式：
// 组类别#物品名称# 自动拾取# 挂机捡取
const picksetArr = [
  { value: "0", label: "不显示", children: [
    { value: "0", label: "不捡取", children: [
      { value: "0", label: "不捡取" },
      { value: "1", label: "捡取" }
    ] },
    { value: "1", label: "捡取", children: [
      { value: "0", label: "不捡取" },
      { value: "1", label: "捡取" }
    ] }
  ] },
  { value: "1", label: "显示", children: [
    { value: "0", label: "不捡取", children: [
      { value: "0", label: "不捡取" },
      { value: "1", label: "捡取" }
    ] },
    { value: "1", label: "捡取", children: [
      { value: "0", label: "不捡取" },
      { value: "1", label: "捡取" }
    ] }
  ] }
]

// 属性初始值
const jsfsArr = [
  { value: "1", label: "乘法" },
  { value: "2", label: "加法" }
]

// 属性初始值
const zhiyeArr = [
  { value: "0", label: "战士" },
  { value: "1", label: "法师" },
  { value: "2", label: "道士" },
  { value: "4", label: "预留" },
  { value: "3", label: "所有职业" }
]

// 生成快速查找的映射对象
const stdModeMap = computed(() =>
  Object.fromEntries(StdModeArr.map(item => [item.value, item.label]))
)


// 编辑状态控制
const editBzRowId = ref<number | null>(null)
const editBzColumnProp = ref<string | null>(null)

// 单元格点击事件
const handleBzClick = (row:any, column: { property: string }) => {
  editBzRowId.value = row.uuid
  editBzColumnProp.value = column.property
}

// 退出编辑模式
const exitEditBzMode = () => {
  editBzRowId.value = null
  editBzColumnProp.value = null
}


// 编辑状态控制
const editingRowId = ref<number | null>(null)
const editingColumnProp = ref<string | null>(null)

// 单元格点击事件
const handleCellClick = (row:any, column: { property: string }) => {
  editingRowId.value = row.id
  editingColumnProp.value = column.property
}

// 退出编辑模式
const exitEditMode = () => {
  editingRowId.value = null
  editingColumnProp.value = null
}

</script>

<template>
  <!-- 表格头部配置 -->
  <div class="app-container center">
    <el-row>
      <el-col :span="24">
        <div class="top">
          <div class="title">
            装备设置
          </div>
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="装备数量">
              <el-input v-model="zbNum" placeholder="装备数量" clearable style="width: 80px" />
            </el-form-item>
            <el-form-item label="idx">
              <el-input v-model="idx" clearable style="width: 80px" />
            </el-form-item>
            <el-form-item label="初始值">
              <el-select v-model="StdMode" placeholder="Select" style="width: 120px">
                <el-option
                  v-for="item in StdModeArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="装备重量">
              <el-input v-model="Weight" placeholder="装备重量" clearable style="width: 80px" />
            </el-form-item>
            <el-form-item label="负重值(外观)">
              <el-input v-model="Anicount" placeholder="负重值(外观)" clearable style="width: 80px" />
            </el-form-item>
            <el-form-item label="背包显示">
              <el-input v-model="Looks" placeholder="背包显示" clearable style="width: 80px" />
            </el-form-item>
            <el-form-item label="持久度">
              <el-input v-model="DuraMax" placeholder="持久度" clearable style="width: 80px" />
            </el-form-item>
            <el-form-item label="使用等级">
              <el-input v-model="NeedLevel" placeholder="使用等级" clearable style="width: 80px" />
            </el-form-item>
            <el-form-item label="出售价格">
              <el-input v-model="Price" placeholder="出售价格" clearable style="width: 80px" />
            </el-form-item>
            <el-form-item label="颜色">
              <el-input v-model="Color" placeholder="颜色" clearable style="width: 80px" />
            </el-form-item>
            <el-form-item label="物品规则">
              <el-select v-model="Article" multiple placeholder="Select" style="width: 120px">
                <el-option
                  v-for="item in ArticleArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                  <div class="flex items-center">
                    <span :style="{ color: item.value }">{{ item.label }}</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="使用职业">
              <el-select v-model="Job" placeholder="Select" style="width: 120px">
                <el-option
                  v-for="item in JobArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="内挂拾取">
              <el-cascader v-model="pickset" :options="picksetArr" style="width: 120px" />
            </el-form-item>
          </el-form>
          <div class="btn">
            <el-button type="success" style="margin-left: 16px" @click="drawerAttribute = true">
              属性编辑
            </el-button>
            <el-button type="success" style="margin-left: 16px" @click="drawer = true">
              备注编辑
            </el-button>
            <el-button type="primary" @click="generate()">
              生成数据
            </el-button>
            <el-button type="danger" @click="clearData()">
              清空数据
            </el-button>
            <el-button type="warning" @click="handleExport">
              导出数据
            </el-button>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>

  <!-- 装备生成表格 -->
  <div class="center ">
    <el-table :data="tableData" style="width: 100%" show-overflow-tooltip>
      <el-table-column prop="idx" label="id" width="80" />
      <el-table-column prop="name" label="装备名字" width="120" />
      <el-table-column prop="StdMode" label="装备类型" width="120">
        <template #default="{ row }">
          {{ stdModeMap[row.StdMode] || '未知类型' }}
        </template>
      </el-table-column>
      <el-table-column prop="Weight" label="装备重量" width="120" />
      <el-table-column prop="Anicount" label="负重值(外观)" width="120" />
      <el-table-column prop="Source" label="暂留" width="60" />
      <el-table-column prop="Reserved" label="暂留" width="60" />
      <el-table-column prop="Looks" label="背包显示" width="80" />
      <el-table-column prop="DuraMax" label="持久度" width="70" />
      <el-table-column prop="Attribute" label="属性" width="70" />
      <el-table-column prop="Need" label="使用条件" width="80" />
      <el-table-column prop="NeedLevel" label="使用等级" width="80" />
      <el-table-column prop="Price" label="出售价格" width="80" />
      <el-table-column prop="Color" label="颜色" width="60" />
      <el-table-column prop="OverLap" label="叠加物品" width="80" />
      <el-table-column prop="Suit" label="老套装ID" width="80" />
      <el-table-column prop="Article" label="物品规则" width="80" />
      <el-table-column prop="Job" label="使用职业" width="80" />
      <el-table-column prop="effectParam" label="道具特殊效果参数" width="80" />
      <el-table-column prop="Desc" label="属性" width="80" />
      <el-table-column prop="pickset" label="内挂拾取" width="80" />
      <el-table-column prop="guangzhu" label="物品光柱" width="80" />
      <el-table-column prop="auctionby" label="拍卖行分类" width="80" />
      <el-table-column prop="sEffect" label="物品内观特效" width="80" />
      <el-table-column prop="bEffect" label="物品背包特效" width="80" />
      <el-table-column prop="value" label="预留字段" width="80" />
      <el-table-column prop="rizhi" label="物品后台查询日志" width="80" />
      <el-table-column prop="zblmtkz" label="是否屏蔽裸模" width="80" />
      <el-table-column prop="ITEMPAEAM1" label="自定义字符分类1" width="80" />
      <el-table-column prop="ITEMPAEAM2" label="自定义字符分类2" width="80" />
      <el-table-column prop="Comparison" label="装备比较优先级" width="80" />
      <el-table-column prop="suitid" label="新套装" width="80" />
      <el-table-column prop="Insurance" label="装备投保" width="80" />
      <el-table-column prop="pickCondition" label="自动拾取条件" width="80" />
      <el-table-column prop="DropTypeShow" label="掉落频道提示信息配置" width="110" />
      <el-table-column prop="QiugouGoldList" label="设置求购行货币最小限制" width="110" />
      <el-table-column prop="QiugouMaxCnt" label="求购行最大求购数量限制" width="110" />
      <el-table-column prop="ShuXing1" label="属性1" width="80" />
      <el-table-column prop="ShuXing2" label="属性2" width="80" />
    </el-table>
  </div>

  <!-- 属性配置抽屉 -->
  <el-drawer v-model="drawerAttribute" title="I am the title" :with-header="false">
    <span>属性配置</span>
    <div class="attribute">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="计算方式">
          <el-select v-model="attributeForm.type" placeholder="计算方式" style="width: 120px">
            <el-option
              v-for="item in jsfsArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="初始值">
          <el-select v-model="attributeForm.zhiye" placeholder="职业" style="width: 120px">
            <el-option
              v-for="item in zhiyeArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="属性id">
          <el-input v-model="attributeForm.id" placeholder="属性id" clearable style="width: 80px" />
        </el-form-item>
        <el-form-item label="属性值">
          <el-input v-model="attributeForm.value" placeholder="属性值" clearable style="width: 80px" />
        </el-form-item>
        <el-form-item label="增长基数">
          <el-input v-model="attributeForm.increase" placeholder="增长基数" clearable style="width: 80px" />
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-button type="primary" @click="addAttribute()">
          添加属性
        </el-button>
      </div>

      <div>
        <el-table :data="attributeInit" style="width: 100%" @cell-click="handleBzClick">
          <el-table-column prop="zhiye" label="职业" width="70" />
          <el-table-column prop="id" label="属性id" width="70">
            <template #default="{ row, column }">
            <el-input
              v-if="editBzRowId === row.uuid && editBzColumnProp === column.property"
              v-model="row[column.property]"
              @blur="exitEditBzMode"
              @keyup.enter="exitEditBzMode"
            />
            <span v-else>{{ row[column.property] }}</span>
          </template>
          </el-table-column>
          <el-table-column prop="value" label="属性值" width="100">
            <template #default="{ row, column }">
              <el-input
                v-if="editBzRowId === row.uuid && editBzColumnProp === column.property"
                v-model="row[column.property]"
                @blur="exitEditBzMode"
                @keyup.enter="exitEditBzMode"
              />
              <span v-else>{{ row[column.property] }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="increase" label="成长基数">
            <template #default="{ row, column }">
              <el-input
                v-if="editBzRowId === row.uuid && editBzColumnProp === column.property"
                v-model="row[column.property]"
                @blur="exitEditBzMode"
                @keyup.enter="exitEditBzMode"
              />
              <span v-else>{{ row[column.property] }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" min-width="60">
            <template #default="{ row }">
              <el-button link type="danger" size="small" @click="attributeDel(row.uuid)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </el-drawer>

  <!-- 备注编辑抽屉 -->
  <el-drawer v-model="drawer" title="I am the title" :with-header="false" size="50%">
    <span style="padding: 15px;">编辑备注</span>
    <div class="attribute" style="padding: 15px;">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="计算方式">
          <el-select v-model="beiZhuForm.type" placeholder="计算方式" style="width: 120px">
            <el-option
              v-for="item in jsfsArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="key">
          <el-input v-model="beiZhuForm.key" placeholder="key" clearable style="width: 80px" />
        </el-form-item>
        <el-form-item label="初始值">
          <el-input v-model="beiZhuForm.value" placeholder="初始值" clearable style="width: 80px" />
        </el-form-item>
        <el-form-item label="增长基数">
          <el-input v-model="beiZhuForm.increase" placeholder="增长基数" clearable style="width: 80px" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addBeiZhu()">
            添加属性
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table :data="beiZhuInit" style="width: 100%" @cell-click="handleCellClick">
        <el-table-column prop="key" label="计算方式">
          <template #default="{ row }">
            {{ row.type === "1" ? '乘法' : '加法' }}
          </template>
        </el-table-column>
        <el-table-column prop="key" label="key">
          <template #default="{ row, column }">
            <el-input
              v-if="editingRowId === row.id && editingColumnProp === column.property"
              v-model="row[column.property]"
              @blur="exitEditMode"
              @keyup.enter="exitEditMode"
            />
            <span v-else>{{ row[column.property] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="属性值">
          <template #default="{ row, column }">
            <el-input
              v-if="editingRowId === row.id && editingColumnProp === column.property"
              v-model="row[column.property]"
              @blur="exitEditMode"
              @keyup.enter="exitEditMode"
            />
            <span v-else>{{ row[column.property] }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="increase" label="成长基数">
          <template #default="{ row, column }">
            <el-input
              v-if="editingRowId === row.id && editingColumnProp === column.property"
              v-model="row[column.property]"
              @blur="exitEditMode"
              @keyup.enter="exitEditMode"
            />
            <span v-else>{{ row[column.property] }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80">
          <template #default="{ row }">
            <el-button link type="danger" size="small" @click="baiZhuDel(row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row :gutter="20" style="margin-top: 20px;padding: 15px;">
      <el-col :span="8">
        <div>
          <div style="margin-bottom: 10px;">
            编辑备注 <span style="color: #999;font: 0.8em sans-serif;" v-pre>(使用{{key}}的方式插入 key是上方属性的key)</span>
          </div>
          <el-input v-model="Desc" type="textarea" :rows="15" />
        </div>
      </el-col>
      <el-col :span="8">
        <div>
          <div style="margin-bottom: 10px;">
            属性数值 <span style="color: #999;font: 0.8em sans-serif;" v-pre>(使用{{key}}的方式插入 key是上方属性的key)</span>
          </div>
          <el-input v-model="ShuXing1" type="textarea" :rows="15" />
        </div>
      </el-col>
      <el-col :span="8">
        <div>
          <div style="margin-bottom: 10px;">
            属性百分比 <span style="color: #999;font: 0.8em sans-serif;" v-pre>(使用{{key}}的方式插入 key是上方属性的key)</span>
          </div>
          <el-input v-model="ShuXing2" type="textarea" :rows="15" />
        </div>
      </el-col>
    </el-row>
  </el-drawer>
</template>

<style lang="scss" scoped>
.center {
  padding: 0 10px;
  margin-top: 10px;
}
.top {
  width: 100%;
  padding: 15px 15px 0;
  background-color: #fff;
  border-radius: 4px;
}
.title {
  padding-bottom: 15px;
}
.note {
  font-size: 12px;
}
.grid-content {
  background-color: #fff;
}
.el-table {
  padding: 15px;
  border-radius: 4px;
}
.btn {
  padding-bottom: 15px;
}

.attribute {
  padding: 20px 0;
}
</style>
